<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>苹果官网耳机动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }


    .watch {
      height: 3240px;
      /*background: linear-gradient(rgb(100, 123, 129), #07121a);*/
      background: #000;
    }

    /* 一个小核心，canvas 要改为粘性定位，这样图片就会固定到当前位置 */
    .watch canvas {
      position: sticky;
      top: 0;
      object-fit: contain
    }

    body {
      overflow-x: hidden;
    }
  </style>
</head>
<body>
<div class="watch">
  <canvas id="myCanvas"></canvas>
</div>
</body>
<script>
  // 1．创建canvas
  const myCanvas = document.querySelector( "#myCanvas")
  myCanvas.width = window.innerWidth
  myCanvas.height = window.innerWidth * 810/1440
  const ctx = myCanvas.getContext("2d")

  // 2．创建图片地址函数
  function picFn(index){
    if (index < 10){
      return `./pic/000${index}.png` // 0001.png
    }else if (index < 180){
      return `./pic/00${index}.png` // 0010.png
    }
  }

  // 起始值从0开始
  let index = 0
  let img = new Image()

  // 3．声明渲染函数
  const render = function () {
    // 创建图片
    img.src = picFn(index)
    img.onload = function () {
      // 清除以前画布内容
      ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
      // 绘制新的画布内容
      ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height)
    }
  }

  render() // 调用函数

  // 4.页面滚动事件
  window.addEventListener( "scroll", function () {
      // 获取滚动条滚动的距离
      const scrollTop = document.documentElement.scrollTop
      // 获取滚动条滚动的百分比
      const percent = scrollTop / window.innerHeight
      // 计算当前应该显示的图片
      // 公式 Math.min(最大图片数字，Math.ceiL(百分比*65))
      index = Math.min(65 - 1, Math.ceil(percent * 65))
      // 调用渲染函数
      requestAnimationFrame(render)
  })
</script>
</html>
